import { defineStore } from 'pinia';

import defaultSettings from '@/configs/baseConfig';

export const useSettingsStore = defineStore('setting', () => {
    // state
    const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView);

    const showSettings = ref<boolean>(defaultSettings.showSettings);
    const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);

    const fixedHeader = useStorage<boolean>('fixedHeader', defaultSettings.fixedHeader);

    const layout = useStorage<string>('layout', defaultSettings.layout);
    const themeColor = useStorage<string>('themeColor', defaultSettings.themeColor);

    const theme = useStorage<string>('theme', defaultSettings.theme);

    // actions
    function changeSetting(param: { key: string; value: any }) {
        const { key, value } = param;
        switch (key) {
            case 'showSettings':
                showSettings.value = value;
                break;
            case 'fixedHeader':
                fixedHeader.value = value;
                break;
            case 'tagsView':
                tagsView.value = value;
                break;
            case 'sidevarLogo':
                sidebarLogo.value = value;
                break;
            case 'layout':
                layout.value = value;
                break;
            case 'themeColor':
                themeColor.value = value;
                break;
            case 'theme':
                theme.value = value;
                if (theme.value === 'dark') {
                    document.documentElement.classList.add('dark');
                } else {
                    document.documentElement.classList.remove('dark');
                }
                break;
        }
    }

    return {
        showSettings,
        tagsView,
        fixedHeader,
        sidebarLogo,
        layout,
        themeColor,
        changeSetting,
        theme,
    };
});
